<template>
  <el-table
    ref="multipleTable"
    :data="tableData"
    highlight-current-row
    header-row-class-name
    show-overflow-tooltip
    border
    style="width: 100%">
    <el-table-column
      v-if="mult"
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      type="index"
      width="50">
    </el-table-column>
    <el-table-column
      v-for="(item, index) in tableColumns"
      :fixed="item['type'] && item['type'] == 'operation'?'right':false"
      :key="index"
      :prop="item.prop"
      :label="item.label"
      :min-width="item.width && item.width!=''? item.width : 120">
      <template slot-scope="scope" v-if="item['slot']">
        <el-button size="small" v-for="slotItem in item.slot" :key="slotItem.funName" :type="slotItem.type" @click="handelBtn(slotItem.funName,scope.row)">{{ slotItem.label }}</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'dfTable',
  props:{
    tableColumns: Array,
    tableData: Array,
    mult: Boolean
  },
  data(){
    return {
      searchStr: ''
    }
  },
  methods: {
    handelBtn(func,row){
      this.$emit('rowbtnclick',func,row)
    }
  }
}
</script>
<style lang="scss">
.el-table__header th{
  background-color: #f2f2f2;
}
.el-table td, .el-table th.is-leaf {
    border-bottom: 1px solid #e6e6e6;
}
.el-table--border{
    border: 1px solid #e6e6e6;
    th,td {
      border-right: 1px solid #e6e6e6;
    }
}
</style>